昨天與大家說明過了五大組件，今天就是要開始開發一個實際專案，我建立了一個空白的專案供大家下載，裡面有了一個最基本的資料架構，接下來的操作都會以這個專案開發。

檔案：https://github.com/oossccaa/emptyProject

首先，我們打開資料夾會看到昨天說的組件以及icon資料夾，這只是為了讓大家好區分，也可以全放在根目錄，只要路徑讀得到就好了

第二，我們使用VS Code打開manifest.json，裡面有一些資訊可以讓我們設定，我簡單的說明一下

{
    //必要
    "manifest_version": 2, //Chreome 18 以上版本統一使用 2
    "name": "EmptyProject", //功能名稱
    "version": "1.0.0", //版本
    
    //建議
    "description": "Chrome extension empty project",　//功能敘述
    "icons": {　//右上角圖形
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    },
    // UI頁面載入方式 - browser_action or page_action
    "browser_action":{
        "default_icon": "icons/icon32.png",
        "default_popup": "popup/popup.html"
    },
    //依照不同網址載入檔案
    "content_scripts": [ 
        {
          "matches": ["*://*.youtube.com/*"],//如果網址為youtube.com/*則載入此腳本
          "js": ["content_script/base_script.js"]
        }
      ],
      //背景處理(監控)
      "background" :{
          "scripts" :["background/bg.js"],
          //是否總是執行
          "persistent" : false
      },
      //權限控管
      "permissions": [
        "activeTab"
      ]
}

第三，我們設定檔都改好了，那就開始載入擴充功能吧！

我有先預設一些code讓大家可以看到實際的運作狀況，所以就讓我們來找出那些code，我們要開啟擴充功能的主控台

1. 你可以用直接在chrome瀏覽器輸入

chrome://extensions/

2. 或是打開工具列開啟【更多】->【更多工具】->【擴充功能】來檢視頁面

打開以後會看到這樣的一個畫面，可以看到自己現有的擴充功能

並且點擊【載入未封裝項目】，然後到你下載的專案資料夾根目錄(有manifest的那個目錄)

登～就誕生囉～趕快點選右上角來試試看吧！

看起來popup是正常運作的，然後再看看 background (在主控台對extension app點選背景頁面)

看起來background也是正常的，我們打開youtube來觀看一下content_script

看來也是沒問題的，所以我們的第一個擴充功能就誕生囉！
那麼接下來就可以挑戰更進階的寫法啦!